<template>
  <div class="upload-container">
    <!-- 返回按钮 -->
    <button class="back-button" @click="goBack">返回</button>

    <!-- 页面标题 -->
    <h2>上传菜谱</h2>

    <!-- 封面上传区域 -->
    <div class="upload-box" @click="handleClick">
      <!-- 未选择图片时的提示 -->
      <div v-if="!selectedImage">
        <p>+ 菜谱封面</p>
        <p>好看的封面图是吸引厨艺友人的关键</p>
      </div>
      <!-- 已选择图片时显示预览 -->
      <img v-else :src="selectedImage" alt="Selected Image" />
    </div>

    <!-- 隐藏的文件选择框 -->
    <input
      type="file"
      ref="fileInput"
      style="display: none"
      @change="handleFileChange"
    />

    <!-- 上传按钮，仅在选择图片后显示 -->
    <button @click="uploadImage" v-if="selectedImage">确认上传</button>

    <!-- 新增字段 -->
    <div class="form-group">
      <label for="recipe-name">菜谱名称</label>
      <input id="recipe-name" v-model="recipeName" placeholder="请给你的菜谱取一个好听的名字吧" />
    </div>

    <div class="form-group">
      <label>综合评分：</label>
      <div class="rating">
        <van-rate v-model="overallRating" :count="5" />
        <!-- <span>{{ overallRating }} </span> -->
      </div>
      
    </div>

    <div class="form-group">
      <label for="cooking-time">菜品时长（分钟）</label>
      <input 
        id="cooking-time" 
        v-model="cookingTime" 
        type="number" 
        placeholder="请输入制作这道菜所需的时间（分钟）"
        min="1"
      />
    </div>

    <div class="form-group">
      <label for="description">美食介绍</label>
      <textarea id="description" v-model="description" placeholder="输入这道美食的背后的故事" maxlength="200"></textarea>
      <span>{{ description.length }}/200</span>
    </div>

    <div class="form-group">
      <label>菜品用料</label>
      <div class="ingredients">
        <div v-for="(ingredient, index) in ingredients" :key="index" class="ingredient-item">
          <input v-model="ingredient.name" placeholder="食材：如生抽" />
          <input v-model="ingredient.amount" placeholder="用量：如半勺" />
          <button @click="removeIngredient(index)">-</button>
        </div>
        <button @click="addIngredient">+ 添加一行</button>
      </div>
    </div>

    <div class="form-group">
      <label for="category">小白菜谱分类</label>
      <select id="category" v-model="category">
        <option value="">请选择菜谱分类</option>
        <!-- 动态渲染分类数据 -->
        <option v-for="cat in mainCategories" :key="cat.mainCategoryId" :value="cat.mainCategoryId">
          {{ cat.mainCategoryName }}
        </option>
      </select>
    </div>

    <button @click="publishRecipe">立即发布菜谱</button>
  </div>
</template>

<script>
// 引入Vue的ref函数
import { ref, onMounted } from 'vue';
// 引入Vant的Rate组件
import { Rate,showToast } from 'vant';
// 引入API请求函数
import { postImg, getMainCategories, addRecipe } from '@/api/index';
// 引入路由跳转函数
import { useRouter } from 'vue-router';

export default {
  // 组件设置
  components: {
    vanRate: Rate, // 注册van-rate组件
  },
  setup() {
    // 响应式变量：存储选中的图片数据
    const selectedImage = ref(null);
    // 响应式变量：引用文件输入元素
    const fileInput = ref(null);
    // 路由跳转
    const router = useRouter();

    // 返回按钮点击事件
    const goBack = () => {
      router.back();
    };

    // 点击上传区域时触发文件选择框
    const handleClick = () => {
      fileInput.value.click();
    };

    // 文件选择变化时的处理函数
    const handleFileChange = (event) => {
      const file = event.target.files[0];
      if (file) {
        // 创建文件读取器
        const reader = new FileReader();
        // 设置文件读取完成后的回调
        reader.onload = (e) => {
          // 将读取结果保存到响应式变量
          selectedImage.value = e.target.result;
        };
        // 以DataUrl方式读取文件
        reader.readAsDataURL(file);
      }
    };

    // 图片上传处理函数
    const uploadImage = async () => {
      // 检查是否选择了文件
      if (!fileInput.value || !fileInput.value.files || fileInput.value.files.length === 0) {
        showToast('请选择要上传的图片');
        return;
      }
      
      // 创建FormData对象用于封装上传数据
      const formData = new FormData();
      // 向FormData中追加文件数据
      const file = fileInput.value.files[0];
      formData.append('image', file);
      
      try {
        // 调用API进行图片上传
        const response = await postImg(formData);
        console.log('上传成功:', response);
        // 确保只存储图片URL，不存储整个响应对象
        let imageUrl;
        if (response && typeof response === 'object' && response.data) {
          // 处理完整的Result对象 {code: 200, message: "success", data: "/src/assets/img/..."}
          imageUrl = response.data;
        } else if (typeof response === 'string' && response.startsWith('/src/assets/img/')) {
          // 直接返回图片URL的情况
          imageUrl = response;
        } else {
          console.error('图片上传返回格式不正确:', response);
          showToast('图片上传返回数据格式不正确');
          return;
        }

        selectedImage.value = imageUrl;
        isImageUploaded.value = true; // 设置上传状态为true
        showToast('图片上传成功');
      } catch (error) {
        console.error('上传失败:', error);
        showToast('上传失败，请重试');
      }
    };

    // 新增字段的数据绑定
    const recipeName = ref('');
    const overallRating = ref(0);
    const cookingTime = ref('');
    const description = ref('');
    const ingredients = ref([{ name: '', amount: '' }]);
    const category = ref('');
    const mainCategories = ref([]); // 用于存储获取的分类数据
    const isImageUploaded = ref(false); // 跟踪图片上传状态

    // 获取主分类数据的函数
    const fetchMainCategories = async () => {
      try {
        // 调用API获取分类数据
        const response = await getMainCategories();
        console.log('获取到的分类数据:', response);
        
        // 根据实际返回的数据结构调整 - 处理 {code: 200, message: "success", data: [...]} 格式
        let categories = [];
        if (response && response.data && Array.isArray(response.data)) {
          // 处理 {code: 200, message: "success", data: [...]} 格式
          categories = response.data;
        } else if (response && Array.isArray(response)) {
          // 如果直接返回的是数组
          categories = response;
        } else if (response && response.list && Array.isArray(response.list)) {
          // 如果返回的是 {list: [...]} 格式
          categories = response.list;
        } else {
          console.error('获取分类数据格式不正确:', response);
          return;
        }
        
        mainCategories.value = categories;
        console.log('处理后的mainCategories:', mainCategories.value);
        console.log('mainCategories长度:', mainCategories.value.length);
      } catch (error) {
        console.error('获取分类失败:', error);
        showToast('获取分类数据失败，请重试');
      }
    };

    // 在组件挂载后获取分类数据
    onMounted(() => {
      fetchMainCategories();
    });

    const addIngredient = () => {
      ingredients.value.push({ name: '', amount: '' });
    };

    const removeIngredient = (index) => {
      ingredients.value.splice(index, 1);
    };

    const publishRecipe = async () => {
      // 检查必填字段
      if (!recipeName.value) {
        showToast('请输入菜谱名称');
        return;
      }
      
      if (!category.value) {
        showToast('请选择菜谱分类');
        return;
      }
      
      if (!selectedImage.value) {
        showToast('请先上传菜谱封面图片');
        return;
      }

      // 构建要发送的菜谱数据，只包含后端需要的字段
      const recipeData = {
        recipesName: recipeName.value,
        recipesRank: overallRating.value,
        recipesUrl: selectedImage.value, // 图片URL
        description: description.value,
        // 处理食材字段，转换为分号分隔的字符串格式 "鸡蛋,2个;番茄,1个"
        foodMaterials: ingredients.value
          .filter(ingredient => ingredient.name && ingredient.amount)
          .map(ingredient => `${ingredient.name.trim()},${ingredient.amount.trim()}`)
          .join(';'),
        // 使用updateTime字段存储菜品时长（分钟）
        ...(cookingTime.value !== null && cookingTime.value !== '' && cookingTime.value !== undefined && { 
          updateTime: parseInt(cookingTime.value, 10)
        })
      };

      // 确保所有字段都是字符串类型（如果需要）
      Object.keys(recipeData).forEach(key => {
        if (typeof recipeData[key] === 'object' && recipeData[key] !== null) {
          console.error(`字段 ${key} 的值为对象，应为字符串：`, recipeData[key]);
          // 将对象转换为字符串（如果适用）
          recipeData[key] = JSON.stringify(recipeData[key]);
        }
      });

      // 添加调试日志
      console.log('准备发送的菜谱数据:', recipeData);
      console.log('数据类型检查:');
      Object.keys(recipeData).forEach(key => {
        console.log(`${key}: ${typeof recipeData[key]} =`, recipeData[key]);
      });
      
      // 添加JSON序列化检查
      try {
        const jsonString = JSON.stringify(recipeData);
        console.log('序列化后的JSON字符串:', jsonString);
        const parsedData = JSON.parse(jsonString);
        console.log('重新解析后的数据:', parsedData);
      } catch (serializeError) {
        console.error('数据序列化错误:', serializeError);
      }

      try {
        // 调用API添加菜谱，同时传递分类ID作为查询参数
        const response = await addRecipe(recipeData, parseInt(category.value, 10));
        console.log('菜谱发布成功:', response);
        showToast('菜谱发布成功');//图片上传返回数据格式不正确
        // 发布成功后返回上一页或跳转到其他页面
        router.back();
      } catch (error) {
        console.error('菜谱发布失败:', error);
        showToast('菜谱发布失败，请重试');
      }
    };

    // 返回模板中需要使用的变量和方法
    return {
      selectedImage,
      fileInput,
      handleClick,
      handleFileChange,
      uploadImage,
      recipeName,
      overallRating,
      cookingTime,
      description,
      ingredients,
      category,
      mainCategories, // 添加这一行，确保模板可以访问mainCategories
      addIngredient,
      removeIngredient,
      publishRecipe,
      goBack
    };
  },
};
</script>

<style scoped>
/* 返回按钮样式 */
.back-button {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: #ff4d4f;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

/* 容器样式：使用flex布局垂直排列内容 */
.upload-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  /* 为返回按钮留出空间 */
  padding-top: 40px;
}

/* 上传区域样式：设置尺寸、边框、居中对齐和指针样式 */
.upload-box {
  width: 300px;
  height: 300px;
  border: 2px dashed #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  cursor: pointer;
}

/* 上传区域内的文字样式 */
.upload-box p {
  text-align: center;
}

/* 图片预览样式：限制图片尺寸 */
.upload-box img {
  max-width: 100%;
  max-height: 100%;
}

/* 新增字段样式 */
.form-group {
  margin-bottom: 20px;
  width: 100%;
  max-width: 400px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

/* 优化下拉框样式 */
.form-group select {
  appearance: none; /* 移除默认下拉箭头 */
  -webkit-appearance: none;
  -moz-appearance: none;
  background: url('data:image/svg+xml;utf8,<svg fill="%23999" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>') no-repeat right 10px center;
  background-color: #fff;
  padding-right: 30px;
  transition: border-color 0.3s ease; /* 添加过渡效果 */
}

.form-group select:focus {
  border-color: #8c8c8c; /* 聚焦时改变边框颜色 */
  outline: none; /* 移除默认聚焦边框 */
}

.form-group textarea {
  resize: vertical;
  min-height: 100px;
}

.rating {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.rating span {
  margin-right: 10px;
}

.ingredients .ingredient-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.ingredients .ingredient-item input {
  margin-right: 10px;
}

.ingredients button {
  background-color: #ff4d4f;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
}

.ingredients button:hover {
  background-color: #ff7875;
}
</style>